// v 0.7
var ComBox = new Class({
	
	Implements: [Options],
	
	options: {
		// widht, heigth, left, top
		sizeFixPreset:{
			"presto":	[21, 4, 3, 2, 0],	// Opera 9
			"webkit":	[19, 2, 1, 1, 2],	//Safari, Google Chrome, Konqueror
			"gecko":	[19, 2, 1, 1, 0],	// Firefox, or any Mozilla
			"trident":	[19, 2, 2, 1, 0]	//explorer
		},
		sizeFixDefault:	[20, 2, 1,1,0],
		sizeFix:false
	},
	
	initialize: function(obj, options){
		
		var element = obj || new Element("select");			
		

		this.setOptions(options);
		
		
		if ($type(element) == "array"){
			
			element.each(function(el){

				el.combox();
				
			}.bind(this)
			);	
		}
		
		if ($type(element) == "string") return this.addComBox($(element))
		if ($type(element) == "element") {

			return this.addComBox(element);
		}
		
		
	},

	addComBox: function(selectBox){
		
		this.value = this.options.def_value || selectBox.getProperty('value');
		
		this.size = {
			x: (selectBox.style.width  || selectBox.getSize().x).toInt(),
			y: (selectBox.style.height || selectBox.getSize().y).toInt()
		};


		var option = selectBox.getElement('option[value='+this.value+']');
		var txt = this.value;
		if (option) txt =  option.get('html');
		
		//var selectBox = el;
		var name = selectBox.getProperty('name');

		
		var sf = this.options.sizeFixPreset[Browser.Engine.name];
		/*
		if (!this.sizeFix){
			
			var sizeFix = this.option.sizefix[Browser.Engine.name];
			
			if (!$chk(sizeFix))sizeFix = this.option.sizeFixDefault;
		}
		*/
		
		selectBox.setProperty('name', '');

		var d = new Element('div', {
			'styles':{
				'width': (this.size.x - sf[0]),
				'height': (this.size.y - sf[1]),
				'position':'absolute',
				'margin-left': sf[2] + "px",
				'margin-top': sf[3] + "px",
				'overflow':'hidden'
			}
		});
		
		var hiddenBox = new Element("input", {
			"type":"hidden",
			"value": this.value,
			"name": name
		}).inject(d);
		
		var inputBox = new Element('input', {
			'type':'text',
			'value': txt,
//			'name': name,
			'styles':{
				'width': (this.size.x - sf[0]),
				'height': (this.size.y - sf[1]),
				'padding-left': sf[4],
				'border': '0px'
			}
		}).inject(d);
		
		new Element('iframe', {
			'styles':{
				'position':'absolute',
				'top':'0px',
				'left':'0px',
				'z-index':'-1',
				'filter':'mask()'
			}
		}).inject(d);
		
		d.inject(selectBox, "before");
		
		
		selectBox.addEvent('change', function(){
			
			var txt = this.getElement('option[value='+selectBox.getProperty('value')+']').get('html');
			
			inputBox.setProperty('value', txt);
			hiddenBox.setProperty('value', this.value);
		});
		
		inputBox.addEvent("keyup",function(ev){
			
			hiddenBox.value = inputBox.value;
			
		});
		selectBox.combox = true;
		return selectBox;
	}
});

Element.implement({

	combox:function(obj){
		
		if (this.get("tag") == "select") {
		
			new ComBox(this);

		}else{

			if (obj) {

				var new_select = new Element("select", {
					"name": obj.name,
					"styles":{
						"width": obj.width,
						"height": obj.height
					}			
				}).inject(this);

				if (obj.options){
	
					obj.options.each(function(el){
						new_select.addOption(el);
					});
				}
				
				new ComBox(new_select, {
					def_value:obj.value || false
				});
			}
			
		}
		return false;
	},
	addOption:function(obj){
		
		if (!$chk(obj)) return ;
		
		var value = obj.value || obj.name;
		var name = obj.name || "";

		if (this.get("tag") == "select"){
			
			new Element("option", {
				"html": name,
				"value":value
			}).inject(this);
			
		}
	}
})
